跨页面与 iframe 通信

同源多 Tab / 窗口

同源下可用 localStorage / sessionStorage 事件（storage 事件）同步简单数据；复杂协作仍建议走服务端或专门频道。

---

postMessage（跨源通用）

用于 窗口与 opener、父页与 iframe、Web Worker 等消息传递；跨域时 必须校验 event.origin，且 targetOrigin 勿滥用 * 发送敏感数据。

// 父页 → 子 iframe
iframe.contentWindow.postMessage({ type: 'ping' }, 'https://child.example');

// 接收
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://child.example') return;
  console.log(e.data);
});

由脚本 window.open 打开的页面也可用 postMessage 回传；需等待子页加载完成再发（如 load 事件后）。

---

与 iframe

跨域 iframe 无法直接互读 DOM，postMessage 是标准跨域通信方式。同域则可访问 contentWindow.document（仍需谨慎 XSS）。

---

小结

跨上下文通信：同源优先明确边界；跨源 postMessage + origin 白名单；敏感操作配合 服务端会话，勿仅靠前端互传密钥。